import React, {Component} from 'react';

class Filed extends Component {
    state = {
        value: ''
    }
    clear() {
        this.setState({value: ''})
    }
    render() {
        return <div>
            <label>{this.props.label}</label>
            <input type={this.props.type}
                   value={this.state.value}
                   onChange={event => this.setState({value: event.target.value})}
            />
        </div>
    }
}


class App extends Component {
    username = React.createRef();
    password = React.createRef();
    render() {
        return <div>
            <Filed label="用户名" type="text" ref={this.username} />
            <Filed label="密码" type="password" ref={this.password} />
            <button onClick={() =>
                console.log(this.username.current.state.value, this.password.current.state.value)}>
                登录
            </button>
            <button onClick={() => {
                this.username.current.clear()
                this.password.current.clear()
            }}>重置</button>
        </div>
    }
}

export default App;